<template>
  <view class="custom-tabbar">
    <view 
      v-for="(item, index) in tabList"
      :key="index"
      :class="['tab-item', { 'middle-item': index === 2 }]"
      @click="switchTab(index)"
    >
      <view class="icon-container">
        <image 
          :src="activeIndex === index ? item.selectedIconPath : item.iconPath"
          :class="['tab-icon', { 'middle-icon': index === 2 }]"
        />
      </view>
      <text 
        :class="['tab-text', { 'middle-text': index === 2, 'active-text': activeIndex === index }]"
      >{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
	
  props: {
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tabList: [
        {
          pagePath: "/pages/index/index",
          iconPath: "/static/tab/t1.png",
          selectedIconPath: "/static/tab/t1s.png",
          text: "首页"
        },
        {
          pagePath: "/pages/category/category",
          iconPath: "/static/tab/t2.png",
          selectedIconPath: "/static/tab/t2s.png",
          text: "动态"
        },
        {
          pagePath: "/pages/cart/cart",
          iconPath: "/static/tab/t3.png",
          selectedIconPath: "/static/tab/t3s.png",
          text: "一键预约"
        },
        {
          pagePath: "/pages/order/list",
          iconPath: "/static/tab/t5.png",
          selectedIconPath: "/static/tab/t5s.png",
          text: "订单"
        },
        {
          pagePath: "/pages/user/user",
          iconPath: "/static/tab/t4.png",
          selectedIconPath: "/static/tab/t4s.png",
          text: "我的"
        }
      ]
    }
  },
  methods: {
    switchTab(index) {
      // 特殊处理中间凸起按钮
      if (index === 2) {
        // 这里可根据需要添加特殊逻辑
      }
      uni.switchTab({ url: this.tabList[index].pagePath })
    }
  },
  mounted() {
    if (typeof uni !== 'undefined' && uni.hideTabBar) {
      uni.hideTabBar();
    }
  }
}
</script>

<style scoped>
/* 整体TabBar样式 */
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110rpx;
  display: flex;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 9999;
}

/* 普通Tab项 */
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 10rpx;
}

/* 中间凸起项容器 */
.middle-item {
  position: relative;
  top: -55rpx;
  z-index: 10;
}

/* 图标容器 */
.icon-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 普通图标样式 */
.tab-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 6rpx;
}

/* 中间凸起图标样式 */
.middle-icon {
  width: 110rpx !important;
  height: 110rpx !important;
  padding:10rpx;
  border-radius: 50%;
  background: #ffffff;
  border-top:1px solid rgba(0,0,0,0.15);
  /* box-shadow: 0 4px 12px rgba(0,0,0,0.15); */
  margin-bottom: 8rpx;
}

/* 文本基础样式 */
.tab-text {
  font-size: 22rpx;
  color: #999;
  line-height: 1.2;
}

/* 中间项文本特殊样式 */
.middle-text {
  position: relative;
  top: -6px; /* 微调文字位置 */
  /* font-weight: bold; */
}

/* 选中状态文本样式 */
.active-text {
  color: #1AC388; /* 使用uView主题蓝色 */
}

/* 选中状态中间文本样式 */
.middle-item .active-text {
  color: #1AC388; /* 中间项可使用不同选中色 */
}
</style>
